<template>
  <div>
    <div :loading="loading" class="app-container">
      <!--对象操作-->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="Back" @click="handleBack"
            >返回</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="EditPen"
            @click="handleScript"
            v-hasPermi="['tms:testcase:edit']"
            >脚本
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="Edit"
            @click="handleEdit"
            v-hasPermi="['tms:testcase:edit']"
            >修改
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="Delete"
            @click="handleDelete"
            v-hasPermi="['tms:testcase:delete']"
            >删除
          </el-button>
        </el-col>
        <y-history-toolbar
          :prefix="form.prefix"
          :historys="historys"
          :command="handleCommand"
        />
      </el-row>

      <!-- 信息展示 -->
      <el-row :gutter="10">
        <!-- 左侧详情展示 -->
        <el-col :lg="18" :xs="24">
          <div v-if="form.precondition">
            <el-card>
              <div class="card-header">
                <h4><strong>预置条件</strong></h4>
              </div>
              <div class="card-body">
                {{ form.precondition }}
              </div>
            </el-card>
            <br />
          </div>
          <div v-if="form.params">
            <el-card>
              <div class="card-header">
                <h4><strong>自动化参数</strong></h4>
              </div>
              <div class="card-body">
                {{ form.params }}
              </div>
            </el-card>
            <br />
          </div>
          <el-card>
            <div class="card-header">
              <h4>
                <strong>用例步骤</strong>
                <el-tooltip placement="right">
                  <template #content>
                    <div>
                      当用例类型为“协议测试”时，可双击步骤所在行，在弹出的对话框中查看步骤详细信息。
                    </div>
                  </template>
                  <el-icon>
                    <question-filled />
                  </el-icon>
                </el-tooltip>
              </h4>
            </div>
            <div class="card-body">
              <steps-info :form="form" />
            </div>
          </el-card>
          <br />
          <el-card>
            <div class="card-header">
              <h4><strong>执行历史</strong></h4>
            </div>
            <div class="card-body">
              <el-table
                v-loading="loading"
                :data="records"
                border
                style="width: 100%"
              >
                <el-table-column type="expand">
                  <template #default="props">
                    <div m="4">
                      <el-table :data="props.row.steps" border>
                        <el-table-column label="编号" prop="id" width="80" />
                        <el-table-column
                          label="步骤"
                          prop="step"
                          :show-overflow-tooltip="true"
                        />
                        <el-table-column
                          label="预期值"
                          prop="exp"
                          :show-overflow-tooltip="true"
                        />
                        <el-table-column
                          label="实际值"
                          prop="actual"
                          :show-overflow-tooltip="true"
                        />
                        <el-table-column
                          label="测试结果"
                          prop="result"
                          align="center"
                          width="80"
                        >
                          <template #default="scope">
                            <y-dict-tag
                              :options="tms_tc_result"
                              :value="scope.row.result"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="操作"
                          fixed="right"
                          align="center"
                          width="80"
                        >
                          <template #default="scope">
                            <el-tooltip content="日志" placement="top">
                              <el-button
                                link
                                type="primary"
                                icon="ChatDotSquare"
                                @click="handleJobLog(scope.row)"
                                v-hasPermi="['tms:job:log']"
                              >
                              </el-button>
                            </el-tooltip>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="任务名称"
                  prop="job.label"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="执行编号"
                  prop="job_execution"
                  :show-overflow-tooltip="true"
                />
                <el-table-column label="开始执行时间" prop="run_time" />
                <el-table-column label="结束执行时间" prop="finished" />
                <el-table-column label="执行结果" prop="status">
                  <template #default="scope">
                    <y-dict-tag
                      :options="tms_job_status"
                      :value="scope.row.status"
                    />
                  </template>
                </el-table-column>
              </el-table>
              <y-pagination
                class="card-pagination"
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.page"
                v-model:limit="queryParams.limit"
                @pagination="getRecords"
              />
            </div>
          </el-card>
          <br />
          <el-card>
            <div class="card-header">
              <h4><strong>备注信息</strong></h4>
            </div>
            <div class="card-body">
              <div v-html="form.remark"></div>
            </div>
          </el-card>
        </el-col>

        <!-- 右侧属性展示 -->
        <el-col :lg="6" :xs="8">
          <el-card>
            <el-tabs v-model="activeName">
              <el-tab-pane label="基本信息" name="1">
                <el-descriptions direction="vertical" :column="1" border>
                  <el-descriptions-item label="用例编号">{{
                    form.number
                  }}</el-descriptions-item>
                  <el-descriptions-item label="用例名称">{{
                    form.name
                  }}</el-descriptions-item>
                  <el-descriptions-item label="所属产品">
                    <router-link
                      v-if="form.product"
                      :to="'/pms/product-info/index/' + form.product.value"
                      class="link-type"
                    >
                      <span>{{ form.product.label }}</span>
                    </router-link>
                  </el-descriptions-item>
                  <el-descriptions-item label="所属模块">
                    <router-link
                      v-if="form.module"
                      :to="'/pms/module-info/index/' + form.module.value"
                      class="link-type"
                    >
                      <span>{{ form.module.label }}</span>
                    </router-link>
                  </el-descriptions-item>
                  <el-descriptions-item label="用例类型">
                    <y-dict-tag :options="tms_tc_type" :value="form.type" />
                  </el-descriptions-item>
                  <el-descriptions-item label="用例级别">
                    <y-dict-tag :options="tms_tc_level" :value="form.level" />
                  </el-descriptions-item>
                  <el-descriptions-item label="适用阶段">
                    <y-dict-tag :options="tms_tc_stage" :value="form.stage" />
                  </el-descriptions-item>
                  <el-descriptions-item label="是否可自动化">
                    <y-dict-tag :options="sys_yes_no" :value="form.isauto" />
                  </el-descriptions-item>
                  <el-descriptions-item label="创建人">{{
                    form.creator_name
                  }}</el-descriptions-item>
                  <el-descriptions-item label="创建时间">{{
                    form.create_time
                  }}</el-descriptions-item>
                  <el-descriptions-item label="状态">
                    <y-dict-tag
                      :options="sys_enable_disable"
                      :value="form.status"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="标签">
                    <y-tag v-model="form.tags" :editable="false" />
                  </el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
              <el-tab-pane label="相关信息" name="2">
                <el-descriptions direction="vertical" :column="1" border>
                  <el-descriptions-item label="关联需求">
                    <router-link
                      v-for="(item, index) in form.reqs"
                      :to="'/pms/requirement-info/index/' + item.value"
                      class="link-type"
                    >
                      <span>{{ index + 1 }}.{{ item.label }}</span>
                      <br />
                    </router-link>
                  </el-descriptions-item>
                  <el-descriptions-item label="关联缺陷" :span="2">
                    <router-link
                      v-for="(item, index) in form.bug_set"
                      :to="'/tms/bug-info/index/' + item.value"
                      class="link-type"
                    >
                      <span>{{ index + 1 }}.{{ item.label }}</span>
                      <br />
                    </router-link>
                  </el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
            </el-tabs>
          </el-card>
          <br />
          <el-card>
            <div class="card-header">
              <h4><strong>操作记录</strong></h4>
            </div>
            <div class="card-body">
              <el-collapse>
                <el-collapse-item
                  v-for="record in form.history"
                  :title="record.title"
                >
                  <li v-for="sub in record.content">
                    {{ sub }}
                  </li>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 添加或修改对话框 -->
    <au-case
      :id="id"
      v-model="open"
      :title="title"
      :operate="operate"
      :getMethod="getTestCase"
      :updateMethod="updateTestCase"
      @submited="submited"
      @close="open = false"
    >
    </au-case>

    <au-script
      :id="id"
      v-model="openScript"
      :title="title"
      :getMethod="getTestCase"
      :updateMethod="updateTestCase"
      @submited="submited"
      @close="openScript = false"
    >
    </au-script>

    <!-- 用例日志详情展示 -->
    <el-dialog
      title="执行日志"
      v-model="openLog"
      width="1000px"
      @close="openLog = false"
      append-to-body
    >
      <el-form :model="form" label-width="100px">
        <el-input
          :rows="15"
          readonly="readonly"
          prop="detail"
          label-width="100px"
          v-model="form.detail"
          type="textarea"
        />
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup name="TestCaseInfo">
import {
  getTestCase,
  getHistory,
  updateTestCase,
  delTestCase,
} from "@/api/tms/testcase";
import { listJobLog } from "@/api/tms/job/log";
import AuCase from "./components/AuCase";
import AuScript from "./components/AuScript";
import StepsInfo from "./components/StepsInfo";

const route = useRoute();
const { proxy } = getCurrentInstance();
const {
  sys_enable_disable,
  tms_tc_level,
  tms_tc_type,
  tms_tc_stage,
  sys_yes_no,
  tms_job_status,
  tms_tc_result,
} = proxy.useDict(
  "sys_enable_disable",
  "tms_tc_level",
  "tms_tc_type",
  "tms_tc_stage",
  "sys_yes_no",
  "tms_job_status",
  "tms_tc_result"
);

const id = ref(null);
const open = ref(false);
const total = ref(0);
const title = ref("");
const loading = ref(false);
const records = ref([]);
const operate = ref("update");
const openLog = ref(false);
const openScript = ref(false);
const activeName = ref("1");
const historys = ref([]);

const data = reactive({
  form: {},
  queryParams: {
    testcase: route.params.id,
    page: 1,
    limit: 10,
  },
});

const { queryParams, form } = toRefs(data);

/** 获取用例详情 */
function getInfo() {
  getTestCase(queryParams.value.testcase).then((response) => {
    form.value = response.data;
  });
}

/** 获取用例执行记录 */
function getRecords() {
  loading.value = true;
  listJobLog(queryParams.value).then((res) => {
    total.value = res.total;
    records.value = res.data;
    loading.value = false;
  });
}

/** 获取用例执行记录 */
function getHistorys() {
  getHistory(queryParams.value.testcase).then((res) => {
    historys.value = res.data;
  });
}

/** 查询某条历史记录 */
function handleCommand(command) {
  form.value = command;
}

/** 返回操作 */
function handleBack() {
  proxy.$router.back();
}

/** 修改操作 */
function handleEdit() {
  id.value = form.value.id;
  open.value = true;
  title.value = "修改用例";
}

/** 执行脚本 */
function handleScript() {
  id.value = form.value.id;
  openScript.value = true;
  title.value = "执行脚本";
}

/** 详细日志按钮操作 */
function handleJobLog(row) {
  openLog.value = true;
  form.value = row;
}

/** 删除按钮操作 */
function handleDelete() {
  proxy.$modal
    .confirm('是否确认删除用例编号为"' + form.value.number + '"的数据项?')
    .then(() => {
      return delTestCase(form.value.id);
    })
    .then(() => {
      proxy.$modal.msgSuccess("删除成功");
      handleBack();
    })
    .catch(() => {});
}

/** 添加/修改对象后触发事件 */
function submited() {
  getInfo();
  getHistorys();
}
getInfo();
getHistorys();
getRecords();
</script>
